<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>就诊进度 - 萌迹(Cute Trail Admin)后台管理系统模板</title>
<link rel="icon" href="pet vet.ico" type="image/ico">
<meta name="keywords" content="CuteTrail,萌迹,后台模板,后台管理系统,萌迹HTML模板">
<meta name="description" content="CuteTrail是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            font-size: 24px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        /* 进度步骤 */
        .progress-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
            position: relative;
        }
        
        .progress-steps::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #ddd;
            z-index: 1;
        }
        
        .step {
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .step-icon {
            width: 36px;
            height: 36px;
            background-color: #3498db;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
        }
        
        .step.active .step-icon {
            background-color: #2ecc71;
        }
        
        .step.completed .step-icon {
            background-color: #2ecc71;
        }
        
        .step.completed .step-icon::after {
            content: '✓';
        }
        
        .step-label {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .step.active .step-label {
            color: #2c3e50;
            font-weight: bold;
        }
        
        /* 横向医生接诊表单 */
        .doctor-consultation {
            display: flex;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .consultation-section {
            flex: 1;
            padding: 0 15px;
        }
        
        .consultation-section:not(:last-child) {
            border-right: 1px solid #eee;
        }
        
        .section-title {
            font-size: 16px;
            margin-bottom: 15px;
            color: #2c3e50;
            padding-bottom: 5px;
            border-bottom: 2px solid #3498db;
        }
        
        .info-item {
            margin-bottom: 15px;
        }
        
        .info-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        textarea, select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        textarea {
            height: 80px;
            resize: none;
        }
        
        select {
            height: 36px;
        }
        
        .action-buttons {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-primary {
            background-color: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-default {
            background-color: #ecf0f1;
            color: #7f8c8d;
        }
        
        .btn-default:hover {
            background-color: #bdc3c7;
        }
        
        /* 收费步骤样式 */
        .payment-section {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: none;
        }
        
        .payment-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .payment-label {
            font-size: 16px;
            color: #7f8c8d;
        }
        
        .payment-value {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .payment-total {
            font-size: 18px;
            color: #e74c3c;
            font-weight: bold;
        }
        
        /* 药师配药步骤样式 */
        .pharmacy-section {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: none;
        }
        
        .medicine-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>就诊进度</h1>
    </div>
    
    <!-- 进度步骤指示器 -->
    <div class="progress-steps">
        <div class="step completed" id="step1">
            <div class="step-icon">1</div>
            <div class="step-label">前台抽号</div>
        </div>
        <div class="step active" id="step2">
            <div class="step-icon">2</div>
            <div class="step-label">医生接诊</div>
        </div>
        <div class="step" id="step3">
            <div class="step-icon">3</div>
            <div class="step-label">收费</div>
        </div>
        <div class="step" id="step4">
            <div class="step-icon">4</div>
            <div class="step-label">药师配药</div>
        </div>
    </div>
    
    <!-- 医生接诊表单 (初始显示) -->
    <div class="doctor-consultation" id="doctor-consultation">
        <!-- 宠物基本信息 -->
        <div class="consultation-section">
            <div class="section-title">宠物基本信息</div>
            <div class="info-item">
                <div class="info-label">宠物名称</div>
                <div class="info-value">豆豆</div>
            </div>
            <div class="info-item">
                <div class="info-label">用户姓名</div>
                <div class="info-value">张先生</div>
            </div>
            <div class="info-item">
                <div class="info-label">宠物年龄</div>
                <div class="info-value">3岁</div>
            </div>
            <div class="info-item">
                <div class="info-label">宠物种类</div>
                <div class="info-value">贵宾犬</div>
            </div>
        </div>
        
        <!-- 症状描述 -->
        <div class="consultation-section">
            <div class="section-title">症状描述</div>
            <textarea placeholder="请输入宠物症状..." id="symptoms">食欲不振，精神萎靡，呕吐2次</textarea>
        </div>
        
        <!-- 诊断结果 -->
        <div class="consultation-section">
            <div class="section-title">诊断结果</div>
            <textarea placeholder="请输入诊断结果..." id="diagnosis">初步诊断为肠胃炎，需进一步检查确认</textarea>
        </div>
        
        <!-- 治疗方案 -->
        <div class="consultation-section">
            <div class="section-title">治疗方案</div>
            <select id="treatment">
                <option value="">请选择治疗方案</option>
                <option value="medicine" selected>药物治疗</option>
                <option value="surgery">手术治疗</option>
                <option value="observation">观察随访</option>
            </select>
            
            <div class="action-buttons">
                <button class="btn btn-default" id="cancel-btn">取消</button>
                <button class="btn btn-primary" id="submit-btn">保存并提交</button>
            </div>
        </div>
    </div>
    
    <!-- 收费步骤 (初始隐藏) -->
    <div class="payment-section" id="payment-section">
        <div class="section-title">收费明细</div>
        
        <div class="info-item">
            <div class="info-label">宠物名称</div>
            <div class="info-value" id="payment-pet-name">豆豆</div>
        </div>
        
        <div class="info-item">
            <div class="info-label">用户姓名</div>
            <div class="info-value" id="payment-owner-name">张先生</div>
        </div>
        
        <div class="payment-item">
            <div class="payment-label">诊断费用</div>
            <div class="payment-value">¥200</div>
        </div>
        
        <div class="payment-item">
            <div class="payment-label">药品费用</div>
            <div class="payment-value">¥150</div>
        </div>
        
        <div class="payment-item">
            <div class="payment-label">治疗费用</div>
            <div class="payment-value">¥100</div>
        </div>
        
        <div class="payment-item" style="margin-top: 20px;">
            <div class="payment-label">总费用</div>
            <div class="payment-value payment-total">¥450</div>
        </div>
        
        <div class="form-group" style="margin-top: 20px;">
            <label for="payment-method" style="display: block; margin-bottom: 8px; font-weight: 500;">支付方式</label>
            <select id="payment-method" style="width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px;">
                <option value="">请选择支付方式</option>
                <option value="cash">现金</option>
                <option value="card">银行卡</option>
                <option value="mobile">手机支付</option>
            </select>
        </div>
        
        <div class="action-buttons" style="margin-top: 20px;">
            <button class="btn btn-default" id="back-to-doctor-btn">返回</button>
            <button class="btn btn-primary" id="next-to-pharmacy-btn">下一步</button>
        </div>
    </div>
    
    <!-- 药师配药步骤 (初始隐藏) -->
    <div class="pharmacy-section" id="pharmacy-section">
        <div class="section-title">药师配药</div>
        
        <div class="info-item">
            <div class="info-label">宠物名称</div>
            <div class="info-value" id="pharmacy-pet-name">豆豆</div>
        </div>
        
        <div class="info-item">
            <div class="info-label">用户姓名</div>
            <div class="info-value" id="pharmacy-owner-name">张先生</div>
        </div>
        
        <div class="info-item">
            <div class="info-label">处方药品</div>
            <div class="medicine-list">
                <div class="medicine-item">
                    <span>消炎药</span>
                    <span>每日2次，每次1片</span>
                </div>
                <div class="medicine-item">
                    <span>维生素</span>
                    <span>每日1次，每次1片</span>
                </div>
                <div class="medicine-item">
                    <span>外用药膏</span>
                    <span>每日涂抹患处2次</span>
                </div>
            </div>
        </div>
        
        <div class="form-group" style="margin-top: 20px;">
            <label for="pharmacy-notes" style="display: block; margin-bottom: 8px; font-weight: 500;">药师备注</label>
            <textarea id="pharmacy-notes" style="width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; height: 80px; resize: none;" placeholder="请输入备注信息..."></textarea>
        </div>
        
        <div class="action-buttons" style="margin-top: 20px;">
            <button class="btn btn-default" id="back-to-payment-btn">返回</button>
            <button class="btn btn-primary" id="complete-btn">完成就诊</button>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const doctorConsultation = document.getElementById('doctor-consultation');
        const paymentSection = document.getElementById('payment-section');
        const pharmacySection = document.getElementById('pharmacy-section');
        const step1 = document.getElementById('step1');
        const step2 = document.getElementById('step2');
        const step3 = document.getElementById('step3');
        const step4 = document.getElementById('step4');
        
        // 初始化显示医生接诊环节
        step1.classList.add('completed');
        step2.classList.add('active');
        doctorConsultation.style.display = 'flex';
        paymentSection.style.display = 'none';
        pharmacySection.style.display = 'none';
        
        // 保存并提交按钮点击事件 (医生→收费)
        document.getElementById('submit-btn').addEventListener('click', function() {
            const symptoms = document.getElementById('symptoms').value;
            const diagnosis = document.getElementById('diagnosis').value;
            const treatment = document.getElementById('treatment').value;
            
            if (!symptoms || !diagnosis || !treatment) {
                alert('请填写完整的接诊信息！');
                return;
            }
            
            // 更新进度步骤
            step2.classList.remove('active');
            step2.classList.add('completed');
            step3.classList.add('active');
            
            // 切换显示内容
            doctorConsultation.style.display = 'none';
            paymentSection.style.display = 'block';
            
            // 更新收费环节的宠物信息
            document.getElementById('payment-pet-name').textContent = '豆豆';
            document.getElementById('payment-owner-name').textContent = '张先生';
        });
        
        // 下一步按钮点击事件 (收费→药师)
        document.getElementById('next-to-pharmacy-btn').addEventListener('click', function() {
            const paymentMethod = document.getElementById('payment-method').value;
            
            if (!paymentMethod) {
                alert('请选择支付方式！');
                return;
            }
            
            // 更新进度步骤
            step3.classList.remove('active');
            step3.classList.add('completed');
            step4.classList.add('active');
            
            // 切换显示内容
            paymentSection.style.display = 'none';
            pharmacySection.style.display = 'block';
            
            // 更新药师配药环节的宠物信息
            document.getElementById('pharmacy-pet-name').textContent = '豆豆';
            document.getElementById('pharmacy-owner-name').textContent = '张先生';
        });
        
        // 返回按钮点击事件 (药师→收费)
        document.getElementById('back-to-payment-btn').addEventListener('click', function() {
            // 更新进度步骤
            step4.classList.remove('active');
            step3.classList.add('active');
            step3.classList.remove('completed');
            
            // 切换显示内容
            pharmacySection.style.display = 'none';
            paymentSection.style.display = 'block';
        });
        
        // 返回按钮点击事件 (收费→医生)
        document.getElementById('back-to-doctor-btn').addEventListener('click', function() {
            // 更新进度步骤
            step3.classList.remove('active');
            step2.classList.add('active');
            step2.classList.remove('completed');
            
            // 切换显示内容
            paymentSection.style.display = 'none';
            doctorConsultation.style.display = 'flex';
        });
        
        // 完成按钮点击事件
        document.getElementById('complete-btn').addEventListener('click', function() {
            const pharmacyNotes = document.getElementById('pharmacy-notes').value;
            
            if (!pharmacyNotes) {
                alert('请填写药师备注！');
                return;
            }
            
            alert('就诊流程已完成！');
            // 这里可以添加完成就诊的逻辑
        });
        
        // 取消按钮点击事件
        document.getElementById('cancel-btn').addEventListener('click', function() {
            if (confirm('确定要取消当前接诊吗？')) {
                alert('接诊已取消');
                // 这里可以添加取消接诊的逻辑
            }
        });
    </script>
</body>
</html>